<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 搜索区 -->
      <el-form  ref="refresh_ref" :model="query_info" :rules="refresh_rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="权限组名称" prop="key">
              <el-input placeholder="请输入权限组名称" maxlength="30" clearable show-word-limit v-model="query_info.key"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="状态" prop="status">
              <el-select v-model="query_info.status" placeholder="请选择状态" clearable @clear="get_list()">
                <el-option label="禁用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="添加时间" prop="created_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.created_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="编辑时间" prop="updated_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.updated_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button :disabled="store_btn" type="info" @click="add_dialog_visible = true">添加</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column align="center" label="编号" prop="id" width="80" fixed="left" sortable></el-table-column>
        <el-table-column align="center" label="权限组名称" prop="name"></el-table-column>
        <el-table-column align="center" label="状态" prop="status" width="200">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.status?'启用':'禁用'" placement="top" :enterable="false">
              <el-switch :disabled="status_btn" v-model="scope.row.status" active-color="#5FB878" inactive-color="#d2d2d2" @change="set_status(scope.row)"></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="添加时间" prop="created_at" width="200" sortable></el-table-column>
        <el-table-column align="center" label="编辑时间" prop="updated_at" width="200" sortable></el-table-column>
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template slot-scope="scope">

            <el-button type="primary" :disabled="edit_btn" icon="iconfont icon-bianji" size="mini" @click="edit(scope.row.id)">编辑</el-button>
              <el-button :disabled="access_btn" type="success" icon="iconfont icon-fenpei" size="mini" @click="s_fp(scope.row.id)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :total="total" :layout="layout" :current-page="query_info.page" :page-sizes="page_sizes" :page-size="query_info.pagesize"></el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="add_dialog_visible" :width="percentage_width" @close="add_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="add_form" :rules="rules"  ref="add_ref">
        <el-form-item label="权限组名称" prop="name">
          <el-input placeholder="请输入权限组名称" maxlength="30" clearable show-word-limit v-model="add_form.name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="add_dialog_visible = false">取 消</el-button>
        <el-button :disabled="store_btn" type="primary" @click="add()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="edit_dialog_visible" :width="percentage_width" @close="edit_dialog_close">
      <!-- 主体区 -->
      <el-form label-width="100px" :model="edit_form" :rules="rules"  ref="edit_ref">
        <el-form-item label="权限组名称" prop="name">
          <el-input placeholder="请输入权限组名称" maxlength="30" clearable show-word-limit v-model="edit_form.name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="edit_dialog_visible = false">取 消</el-button>
          <el-button :disabled="edit_btn" type="primary" @click="edit_send()">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 分配权限对话框 -->
    <el-dialog title="分配权限" :visible.sync="fp_dialog_visible" :width="percentage_width" @close="fp_dialog_close">
       <!-- 主体区 -->
      <el-tree show-checkbox :data="rights_list.rule_arr" :props="props" node-key="id" default-expand-all="true" :default-checked-keys="rights_list.defkeys" ref="fp_ref"></el-tree>
      <!-- 按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="fp_dialog_visible = false">取 消</el-button>
        <el-button :disabled="access_btn" type="primary" @click="fp_send()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status_btn: this.is_string('auth/auth_group/status'), // 状态按钮是否禁用
      store_btn: this.is_string('auth/auth_group/store'), // 添加按钮是否禁用
      edit_btn: this.is_string('auth/auth_group/edit'), // 编辑按钮是否禁用
      access_btn: this.is_string('auth/auth_group/access'), // 分配权限按钮是否禁用
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      page_sizes: this.$config.page_sizes, // 分页条数列表
      layout: this.$config.layout, // 表格分页组件配置
      query_info: {
        key: '', // 查询条件
        status: '', // 状态
        created_at: [], // 添加时间
        updated_at: [], // 编辑时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize// 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      // 添加对话框是否显示
      add_dialog_visible: false,
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      // 编辑对话框是否显示
      fp_dialog_visible: false,
      rights_list: [], // 所有权限的数据
      props: { // 所有权限的数据
        children: 'children',
        label: 'name'
      },
      add_form: {
        name: ''
      },
      edit_form: {
        id: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入权限组名称！', trigger: 'blur' },
          { min: 2, max: 20, message: '权限组名称长度在2到20个字符', trigger: 'blur' }
        ]
      },
      refresh_rules: { key: [], status: [], created_at: [], updated_at: [] }
    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'auth/auth_group/index',
        data: this.query_info
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 刷新
    refresh () {
      this.$refs.refresh_ref.resetFields()
      this.get_list()
    },
    // 当前每页多少条选择
    handle_size_change (pagesize) {
      this.query_info.pagesize = pagesize
      this.get_list()
    },
    // 当前页码
    handle_current_change (page) {
      this.query_info.page = page
      this.get_list()
    },
    // 状态调整
    set_status (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'auth/auth_group/status',
        data: { id: info.id, status: info.status ? 1 : 0 }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          info.status = !info.status
        }
      })
    },
    // 监听添加对话框的关闭事件
    add_dialog_close () {
      this.$refs.add_ref.resetFields()
    },
    // 添加按钮
    add () {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'POST',
            url: 'auth/auth_group/store',
            data: this.add_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.add_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 打开编辑按钮对话框
    edit (id) {
      this.$base.request({
        that: this,
        url: 'auth/auth_group/edit',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.edit_dialog_visible = true
          this.edit_form = res.data
        }
      })
    },
    // 提交编辑数据
    edit_send () {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'auth/auth_group/update',
            data: this.edit_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
              this.edit_dialog_visible = false
              this.get_list()
            }
          })
        }
      })
    },
    // 监听编辑对话框的关闭事件
    edit_dialog_close () {
      this.$refs.edit_ref.resetFields()
    },
    // 展示分配权限
    s_fp (id) {
      this.$base.request({
        that: this,
        url: 'auth/auth_group/access',
        data: { id: id }
      }, (res) => {
        if (res.code === 8888) {
          this.fp_dialog_visible = true
          this.rights_list = res.data
        }
      })
    },
    // 监听分配权限对话框的关闭事件
    fp_dialog_close () {
      this.rights_list = []
    },
    // 提交分配权限数据
    fp_send () {
      const keys = [
        ...this.$refs.fp_ref.getCheckedKeys(),
        ...this.$refs.fp_ref.getHalfCheckedKeys()
      ]
      if (keys.length > 0) {
        const data = {
          id: this.rights_list.id,
          rules: keys.join('|')
        }
        this.$base.request({
          that: this,
          method: 'PUT',
          url: 'auth/auth_group/access_update',
          data: data
        }, (res) => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg })
            this.fp_dialog_visible = false
          }
        })
      } else {
        this.$base.message({ that: this, message: '请选择配置项！' })
      }
    }
  }
}
</script>
